<template>
	<view>
		<view class="m-activity-item">
			<image src="EventMainPic" mode="aspectFill" class="m-activity-img" />
			<view class="m-activity-info">
				<view class="m-activity-name">{{Title}}</view>
				<label class="iconfont icon-shijian gray"></label>
				<label class="m-activity-time">{{EventTime}}</label>
			</view>
		</view>
		<view class="m-cells m-cells-form">
			<view class="m-cell">
				<view class="m-cell-hd">
					<label class="u-label">{{__('姓名')}}：</label>
				</view>
				<view class="m-cell-bd">
					<input class="u-input" type="text" :placeholder="__('请输入姓名')" @input="inputname" />
				</view>
				<view v-if="!isName" class="m-cell-ft">
					<icon class="m-icon-warn" type="warn"></icon>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-hd">
					<label class="u-label">{{__('电话')}}：</label>
				</view>
				<view class="m-cell-bd">
					<input class="u-input" type="number" :placeholder="__('请输入电话')" @input="inputphone" />
				</view>
				<view v-if="!isPhone" class="m-cell-ft">
					<icon class="m-icon-warn" type="warn"></icon>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-hd">
					<label class="u-label">{{__('公司')}}：</label>
				</view>
				<view class="m-cell-bd">
					<input class="u-input" type="text" :placeholder="__('请输入公司名称')" @input="inputfirm" />
				</view>
				<view v-if="!isFirm " class="m-cell-ft">
					<icon class="m-icon-warn" type="warn"></icon>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-hd">
					<label class="u-label">{{__('职位')}}：</label>
				</view>
				<view class="m-cell-bd">
					<input class="u-input" type="text" :placeholder="__('请输入职位')" @input="inputjob" />
				</view>
				<view v-if="!isJob" class="m-cell-ft">
					<icon class="m-icon-warn" type="warn"></icon>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<!--<button class="u-btn u-btn-default" @tap="signinnow">立即报名</button>-->
			<form report-submit="true" @submit="signinnow">
				<button class="u-btn u-btn-default" formType="submit">{{source=="activity"?__('立即报名'):__('立即签到')}}</button>
			</form>
		</view>
	</view>
</template>

<script>
	import $ from "../../helpers/util";

	import dayCountdown from "../components/day-countdown.vue";

	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data: function() {
			return {
				EventMainPic: "",
				Title: "",
				EventTime: "",
				EventId: "",
				UserName: "",
				UserPhone: "",
				UserCompany: "",
				UserPosition: "",
				formId: "",
				isPhone: true,
				isName: true,
				isFirm: true,
				isJob: true,
				source: "",
				isTmplMsg: true
			}
		},
		components: {
			dayCountdown
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {

			console.info(options)
			if (options.source == this.StateCode.MARKRTING_ACTIVITY_JOIN) {
				var t = $.parseJSON(options.val);
				this.setData({
					EventMainPic: t.img,
					Title: t.title,
					EventTime: t.time,
					EventId: t.id,
					source: options.source
				}), wx.setNavigationBarTitle({
					title: t.title + $.__("报名页")
				})
			} else if (options.source == this.StateCode.MARKRTING_ACTIVITY_JOIN_BY_QRCODE) {
				var n = this;

				$.isNull(this.userInfo) ? this.getUserInfo(function(user) {
						if (user) {
							n.setData({
								EventId: options.eventId,
								source: options.source
							}), n.initData()
						}
					},
					options.uid) : (n.setData({
					EventId: options.eventId,
					source: options.source
				}), n.initData())
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			initData: function() {
				var params = {
						activity_id: this.EventId
					},
					that = this;
				that.$.request({
					url: that.Config.URL.user.getMarketing,
					data: params,
					success: function(data, status, msg, code) {
						if (200 == status) {
							that.setData({
								EventMainPic: data.activity_rule.activity_image,
								Title: data.activity_name,
								// EventTime   : e.Info.EventTime
							});
							wx.setNavigationBarTitle({
								title: that.Title + $.__("报名页")
							});
							// e.Info.IsJoin != 0 && (e.Info.IsJoin == 1 ? wx.navigateTo({url: "../activitycheckin/activitycheckin?eventId=" + that.EventId}) : e.Info.IsJoin == 2 && wx.navigateTo({url: "/activity/market/detail?id=" + that.EventId})))

						} else {
							$.alert("出错啦")
						}
					}
				});
			},
			inputname: function(e) {
				this.setData({
					UserName: e.detail.value
				}), $.isNull(e.detail.value) ? this.setData({
					isName: false
				}) : this.setData({
					isName: true
				})
			},
			inputphone: function(e) {
				this.setData({
					UserPhone: e.detail.value
				});
				$.isNull(e.detail.value) ? this.setData({
					isPhone: false
				}) : this.setData({
					isPhone: true
				});
			},
			inputfirm: function(e) {
				this.setData({
					UserCompany: e.detail.value
				}), $.isNull(e.detail.value) ? this.setData({
					isFirm: false
				}) : this.setData({
					isFirm: true
				})
			},
			inputjob: function(e) {
				this.setData({
					UserPosition: e.detail.value
				}), $.isNull(e.detail.value) ? this.setData({
					isJob: false
				}) : this.setData({
					isJob: true
				})
			},
			signinnow: function(e) {
				$.isNull(this.UserName) && this.setData({
					isName: false
				}), $.isNull(this.UserPhone) && this.setData({
					isPhone: false
				}), $.isNull(this.UserCompany) && this.setData({
					isFirm: false
				}), $.isNull(this.UserPosition) && this.setData({
					isJob: false
				}), this.setData({
					formId: e.detail.formId
				});
				if (this.isName && this.isPhone && this.isJob && this.isFirm) {
					var params = {
							activity_id: this.EventId,
							user_name: this.UserName,
							user_phone: this.UserPhone,
							user_company: this.UserCompany,
							user_position: this.UserPosition
						},
						that = this;
					that.$.request({
						url: that.Config.URL.user.doMarketing,
						data: params,
						success: function(data, status, msg, code) {
							if (200 == status) {
								if (data.type == that.StateCode.MARKRTING_ACTIVITY_JOIN) {
									that.isTmplMsg && that.sendMessage(), $.alert($.__("报名成功！"));
									setTimeout(function() {
										$.navigateBack(1, function() {})
									}, 1e3)
								} else if (data.type == that.StateCode.MARKRTING_ACTIVITY_JOIN_BY_QRCODE) {
									$.alert($.__("签到成功！")), setTimeout(function() {
											wx.navigateTo({
												url: "../activitycheckin/activitycheckin?eventId=" + n.EventId
											})
										},
										1e3)
								}

							} else {
								$.alert(msg)
							}
						}
					});
				}
			},
			sendMessage: function() {
				/* todo 微信模板消息
                var e = {
                    api: activityapi.EventJoinWXMessage,
                    pages: "pages/activity/activity?id=" + this.EventId,
                    formId: this.formId,
                    WeiXinOpenId: this.userInfo.openId,
                    value: {
                        EventId: this.EventId,
                        user_id: this.userInfo.user_id
                    }
                };
                $.sendTpl(e)*/
			}
		}
	};
</script>



<style lang="scss">
	@import "../../styles/_variables";


	.m-activity-item {
		width: 100%;
		height: 240rpx;
		margin-bottom: 20rpx;
		background: white;
	}

	.m-activity-img {
		padding: 20rpx;
		width: 260rpx;
		height: 200rpx;
		float: left;
	}

	.m-activity-info {
		width: 450rpx;
		height: 100%;
		float: left;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.m-activity-name {
		font-size: 16px;
		margin-bottom: 40rpx;
		margin-top: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.gray {
		font-size: 35rpx;
		color: gray;
		display: inline-block;
	}

	.m-activity-time {
		margin-left: 10rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #888;
	}

	.btn_box {
		padding-top: 20rpx;
	}

	.u-label {
		width: 100rpx;
	}
</style>